import { Link } from '@brillout/docpress'
import { ProvidedBy, ConfigSpec } from '../../components'

<ConfigSpec
  env="client, server"
  cumulative
  providedBy={<ProvidedBy list={['vike-react']} noCustomGuide={true}>the <code>+react</code> setting</ProvidedBy>}
/>

Add options to the React functions that `vike-react` calls.

On the client-side, you can set the options of React's [`hydrateRoot()`](https://react.dev/reference/react-dom/client/hydrateRoot) and [`createRoot()`](https://react.dev/reference/react-dom/client/createRoot).

```ts
// pages/+react.client.ts
// Environment: client

import type { Config } from 'vike/types'

export default {
  hydrateRootOptions: {
    onUncaughtError
    /*
    onCaughtError,
    onRecoverableError,
    ...
    */
  },
  createRootOptions: {
    onUncaughtError
    /*
    onCaughtError,
    onRecoverableError,
    ...
    */
  }
} satisfies Config['react']

function onUncaughtError(err) {
  console.error('Uncaught React error', err)
}
```

> Make sure you define these in <code>react.<b>client</b>.js</code>.

You can also use <Link href="/pageContext">`pageContext`</Link>:

```ts
// pages/+react.client.ts

import type { Config, PageContextClient } from 'vike/types'

export const react: Config['react'] = (pageContext: PageContextClient) => {
  return {
    hydrateRootOptions,
    createRootOptions
  }
}
```

On the server-side, you can set the options of React's [`renderToString()`](https://react.dev/reference/react-dom/server/renderToString).

```ts
// pages/+react.server.ts
// Environment: server

import type { Config } from 'vike/types'

export default {
  renderToStringOptions: {
    identifierPrefix: 'some-id-prefix'
  }
} satisfies Config['react']
```

> Make sure you define these in <code>react.<b>server</b>.js</code>.


## See also

- <Link href="/vike-react" />
- <Link href="/settings" />
